<template>
    <div class="news">
        <home-header></home-header>
        <home-tabbar></home-tabbar>
        <div class="wrapper">
          <el-menu
            default-active="1"
            class="el-menu-vertical-demo"
            @open="handleOpen"
            @close="handleClose"
            background-color="#545c64"
            text-color="#fff"
            active-text-color="#ffd04b">
                <router-link :to="{name: 'input1'}">
                    <el-menu-item index="1">
                        <i class="el-icon-document"></i>
                        <span slot="title">单个查询 </span>
                    </el-menu-item>
                </router-link>
                <router-link :to="{name: 'input2'}">
                    <el-menu-item index="2">
                        <i class="el-icon-document"></i>
                        <span slot="title">批量查询</span>
                    </el-menu-item>
                </router-link>
          </el-menu>
          <keep-alive>
            <transition name="fade" mode="out-in">
              <router-view class="personview"></router-view>
            </transition>
          </keep-alive>
        </div>
    </div>
</template>

<script>
import HomeHeader from '@/components/home/components/header.vue'
import HomeTabbar from '@/components/home/components/tabbar.vue'
import SearchInput from './components/input'
export default {
  name: 'search',
  components: {
    HomeHeader,
    HomeTabbar,
    SearchInput
  },
  mounted () {
    console.log(this.$store.state.name)
  }
}
</script>

<style lang="stylus" scoped>
  .wrapper{
    display: flex;
  }
    .el-menu-vertical-demo{
      label-position: top;
      width: 10%;
      margin-right: 5rem;
      height: 8rem;
    }
    .personview{
      width: 40%;
    }
</style>
